<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="shortcut" href="./favicon.ico" type="image/x-icon">
    <link rel="icon" sizes="any" mask="" href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"> -->
  <link rel="shortcut icon" href="./favicon1.ico">
  <title>Document</title>
  <style>
    /* a{}
        .a{}
        #a{} */
  </style>
</head>

<body>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>
  <a href="https://www.baidu.com">baidu</a>

  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>

  <form action="">
    <p>
      <input type="text" name="user">
    </p>
    <p>
      <input type="text" name="pwd">
    </p>
    <p>
      <input type="checkbox" name="hobby">
      <input type="checkbox" name="hobby">
      <input type="checkbox" name="hobby">
    </p>
  </form>
</body>
<script>
  // document(文档对象)  => window.document

  // window => document => html => body =>
  // console.log(document);   //打印document结构

  // 注意
  // 1. 每个载入浏览器的 HTML 文档都会成为Document对象。
  // 2. 通过document对象可以对HTML 页面中的所有元素进行访问
  // 3. document 对象是 window 对象的一部分，可通过 window.document 属性对其进行访问

  // console.log(typeof document); // "object"

  // document 的本子也是一个对象  => 如果向查找该对象的详细属性和方法 需要借助 console.dir()
  console.dir(document);

  // document相关的属性和方法  

  // 属性
  // document.all       提供对文档中所有 HTML 元素的访问。是数组类型
  // document.forms     提供对文档中所有 forms 元素的访问。是数组类型
  // document.images    提供对文档中所有 images 元素的访问。是数组类型
  // document.links     提供对文档中所有 a 元素的访问。是数组类型
  // document.documentElement  提供对 html 元素的直接访问。
  // document.body             提供对 body 元素的直接访问。
  // document.head             提供对 head 元素的直接访问。
  // document.title            获取和设置 网页标题的内容

  // document.bgColor          可以改变文档的颜色


  // 方法
  // document.write();           向文档写 HTML 表达式 
  // document.getElementById()   在文档中,通过id名获取对应的元素   => 返回: 没有:null  有:html元素 
  // document.getElementsByClassName() 在文档中,通过class名获取对应的元素  => 没有:空数组  有:对应元素的集合
  // getElementsByTagName()      在文档中,通过标签名获取对应的元素   返回带有指定标签名的元素集合
  // getElementsByName()         在文档中,通过name获取对应的元素   返回带有指定name的元素集合 (新版本浏览器 非表单元素只要设置了name页可以使用此方法  => 老版本可能会有些问题)

  var aList = document.getElementsByTagName("a");
  console.log(aList);
  var liList = document.getElementsByTagName("li");
  console.log(liList);

  // name  
  console.log(document.getElementsByName("user"));

  var user = document.getElementsByName("user")[0];   //获取元素 并取值
  console.log(user);

  var hobbyList = document.getElementsByName("hobby");
  console.log(hobbyList);




</script>

</html>